<template>
  <div class="channel-edit">
    <van-cell center :border="false">
      <div slot="title" class="channel-title">我的频道</div>
      <van-button 
            type="danger" 
            plain
            round
            size="mini"
            @click="isEdit =! isEdit"
            >{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item 
            class="grid-item"
            :class="{active:index === active}"
            :icon="(isEdit && index !== 0) ? 'clear' : '' "
            v-for="(channel1,index) in userChannels" 
            :key="index" 
            :text="channel1.name" 
            @click="onChannelClick(channel1,index)"/>
    </van-grid>
    <van-cell center :border="false">
      <div slot="title" class="channel-title">频道推荐</div>
    </van-cell>

    <van-grid :gutter="10">
      <van-grid-item 
            class="grid-item"
            v-for="(channel,index) in recommendChannels" 
            :key="index" 
            :text="channel.name" 
            @click="onAdd(channel)"/>
    </van-grid>
  </div>
</template>

<script>
import {getAllChannels, addUserChannel, deleteUserChannel} from '@/api/channel'
import {mapState} from 'vuex'
import {setItem} from '@/utils/storage'

export default {
  data() {
    return {
      allChannels:[],
      isEdit:false
    }
  },
  computed:{
    ...mapState(['user']),
    recommendChannels(){
      // 所有-我的 =  剩下的
      return this.allChannels.filter(channel => {
        return !this.userChannels.find(userChannel => {
          return userChannel.id === channel.id
        })
      })
    }
  },
  created() {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels(){
      const {data} = await getAllChannels()
      this.allChannels = data.data.channels
    },
    async onAdd(channel){
      this.userChannels.push(channel)

      // 数据持久化，最后再做
      if(this.user){ //登录了，存储到线上
        await addUserChannel({
          channels:[
            {id: channel.id, 
             seq:this.userChannels.length}
          ]
        })
      }else{ //存储到本地
        setItem('user-channels', this.userChannels)
      }
    },
    onChannelClick(channel,index){
      if (this.isEdit && index !== 0) {
        // 删除频道
        this.deleteChannel(channel,index)
      }else{
        this.switchChannel(index)
      }
    },
    async deleteChannel(channel,index){
      // 如果删除的是当前激活频道之前的频道 active不会变 高亮的位置会变，所以要判定
      if (index <= this.active) {
        this.$emit('update-active', this.active -1)
      }
      this.userChannels.splice(index, 1)
      // 数据持久化
      if (this.user) {
        await deleteUserChannel(channel.id)
      }else{
        setItem('user-channels', this.userChannels)
      }
    },
    switchChannel(index){
      // 切换频道
      this.$emit('update-active',index)
      // 关闭弹出层，而控制弹出层关闭的属性在父组件，要传出去事件
      this.$emit('close')
    }
  },
  props:{
    userChannels:{
      type:Array,
      required:true
    },
    active:{
      type:Number,
      required:true
    }
  }
}
</script>

<style lang="less" scoped>
 .channel-edit{
   padding-top: 54px;
   .channel-title{
     font-size: 16px;
     color: #333;
   }
   .van-button{
     width:50px;
     font-size: 13px;
   }
   .grid-item{
     width: 80px;
     height: 43px;
    /deep/ .van-grid-item__content{
       background-color: #f4f5f6;
       .van-grid-item__text{
         font-size: 14px;
         color: #222;
         margin-top: 0;
       }
     }
    /deep/ .van-grid-item__icon{
       position: absolute;
       right: -5px;
       top: -5px;
       font-size: 20px;
       color: #ccc;
     }
     
   }

   .active{
     /deep/ .van-grid-item__text{
       color: red !important;
     }
   }
 }
</style>